<template>
  <div class="random-container">
    <el-card>
      <!-- 顶部搜索框 -->
      <el-row type="flex" justify="space-between">
        <!-- 第一列 -->
        <el-col :span="7" class="left-container">
          <div class="inputFont">关键字</div>
          <el-input v-model="serchInput" placeholder="请输入内容"></el-input>
        </el-col>
        <!-- 第二列 -->
        <el-col :span="4" class="right-container">
          <el-button>取消</el-button>
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
      <!-- 消息提示 -->
      <el-alert title="消息提示的文案" type="info" show-icon> </el-alert>
      <!-- 表格区域 -->
      <el-table :data="listData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="180"> </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="180"> </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180"> </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间" width="180"> </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率" width="180"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
// 引入请求接口
import { getSubjectList } from '../../api/components/component'
export default {
  data() {
    return {
      // 搜索框
      serchInput: '',
      // 表格数据
      listData: []
    }
  },
  methods: {
    async getSubjectLists() {
      const { data } = await getSubjectList()
      console.log(data)
    }
  },
  created() {
    this.getSubjectLists()
  }
}
</script>

<style lang="less" scoped>
.random-container {
  .el-alert {
    margin-top: 20px;
  }
  .left-container {
    display: flex;
    margin-left: 8px;
    .inputFont {
      width: 60px;
      height: 40px;
      line-height: 40px;
      font-weight: 800;
    }
  }
}
</style>
